<template>
    <div class="zs-layout-flex-row zs-layout-items-center zs-layout-justify-between zs-space-bottom">
        <div class="zs-space-right-sm" :class="{ 'db-btn-active': props.curTab == item.value, 'db-btn': props.curTab != item.value }" v-for="(item, index) in props.tabs" :key="index" @click="changeTab(item.value)">{{ item.label }}</div>
        <div class="zs-layout-grow zs-layout-flex-row zs-layout-justify-end zs-text-gray">{{ props.tabRight }}</div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
    tabs: {
        type: Array,
        required: false,
        default: () => [{ label: '按日', value: '日' }, { label: '按月', value: '月' }, { label: '按年', value: '年' }]
    },
    curTab: {
        type: String,
        required: false,
        default: '日'
    },
    tabRight: {
        type: String,
        required: false,
        default: ''
    }
})
const emit = defineEmits(["onChange"]);


let isCanClick = ref(true)
const changeTab = (value) => {
    if (isCanClick.value) {
        emit("onChange", value);
        isCanClick.value = false
    }
    setTimeout(() => {
        isCanClick.value = true
    }, 1000);
}
</script>

<style scoped lang="scss"></style>
